<template>

  <a-modal v-model:visible="LAYER.visible" :title="LAYER.title" :width="600" :ok-text="LAYER.okText"
           :align-center="LAYER.alignCenter" :top="LAYER.top"
           :footer="false"
           :closable="LAYER.closable" :unmount-on-close="LAYER.unmountOnClose"
           :mask-closable="LAYER.maskClosable" :esc-to-close="LAYER.escToClose" :ok-loading="LAYER.okLoading"
           @cancel="onClose()">
    <div id="playerDom"  ></div>

  </a-modal>

</template>

<script lang="ts" setup>
import {ref}  from  'vue'
import {LocalModal} from '@/libs/core';
import {ProductHttp} from '../../resource/http';

const emit = defineEmits(['close']);
const service = new LocalModal(emit).setMD('监控');
const {LAYER} = service;
const show=ref(false)

const props = defineProps({
  record: {type: Object, required: true}
});
const formRef=ref(null)

var player=null

const onLoadUlr = async () => {
  show.value=true
  const x = {'id': props.record.id}
  const {data} = await ProductHttp.getCameraAddress(x)
  console.log("请求的结果：{}", data)
  console.log(formRef.value)
  player =new Aliplayer({
    id: 'playerDom' ,
    source: data,
    isLive: true,
  });


}

const onClose=async ()=>{
  await player.dispose()
  service.onCancel('NONE')
}

onLoadUlr()

</script>

<style scoped lang="less">
#playerDom{
  background-color: #000000;
  width: 100%;
  height: 500px;
}

:deep(.arco-modal-body){
  padding-top: 0;
}

</style>
